<template>
    <div class="wrap">
      <div class="leftPart">
        <div class="search m-20">
          <el-input v-model="entData.search" style="width: 100%;" type="text" prefix-icon="search" placeholder="搜索部门"/>
        </div>
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          class="filter-tree"
          :highlight-current="true"
          :node-key="entData.id"
          :data="entData.departmentList"
          :props="entData.defaultProps"
          :expand-on-click-node="false"
          :default-expanded-keys="[1]"
          :current-node-key="1"
          :filter-node-method="filterNode"
        >
          <template #default="{ node, data }">
            <div class="departmentItem" @click="clickHandle(node,data)">
              <i class="icon"></i>
              <span class="overflow">{{ node.label }}</span>
              <!-- <el-popover
              placement="top-end"
              title=""
              width=""
              trigger="click"
              content="">
               <template #reference><i class="ellipsis-col" v-show="node.isCurrent"></i></template>
              </el-popover> -->
              
            </div>
          </template>
        </el-tree>
      </div>
      <div class="rightPart m-20">
        <h3 class="xl m-b-20">企业通讯录</h3>
        <div class="searchHead">
          <span class="total">共 1 条</span>
          <el-input v-model="entData.search" style="width: 15rem;" class="m-l-15" type="text" prefix-icon="search" placeholder="请输入姓名/手机号"/>
        </div>
        <div class="tableContent">
          <common-table :tableColumn="entData.tableColumn" :scrollbar-always-on="true" :tableData="entData.tableData" class="m-t-10" style="height: 30rem;"></common-table>
        </div>
      </div>
    </div>
  
</template>

<script lang="ts" setup>
import { checkOneDepartment, getDepartmentList } from '@/http/api/management/department';
import { IDepartmentList, IEmployeeList } from '@/modules/management/department';
import { ElTree } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const entData = reactive({
  search: '',
  id: 'department_id',
  departmentList: [] as IDepartmentList[],
  defaultProps: {
    children: 'children',
    label: 'department_name',
  },
  tableColumn: [
    {label: '姓名', prop: 'admin_name', type: 'default', width: '100px', align: 'left', template: 'text'},
    {label: '职位', prop: 'admin_position', type: 'default', width: '220px', align: 'left', template: 'text'},
    {label: '部门', prop: 'department_name', type: 'default', width: '230px', align: 'left', template: 'text'},
    {label: '联系方式', prop: 'admin_account', type: 'default', width: '230px', align: 'left', template: 'text'},
    {label: '邮箱', prop: 'create_time', type: 'default', width: '230px', align: 'left', template: 'text'},
  ],
  tableData: [] as IEmployeeList[]
})
const treeRef = ref<InstanceType<typeof ElTree>>()
const initData = async () => {
  const result = await getDepartmentList()
  entData.departmentList = result.data
  console.log('result', result,entData.departmentList)
}
const getEmployeeList = async (id:string) => {
  const employeeList = await checkOneDepartment({department_id:id,page:'1'})
  entData.tableData = employeeList.data
  console.log(employeeList)
}
const clickHandle = async (node:any, data:any) => {
  console.log(node, data)
  await getEmployeeList(data.department_id)
}
watch(() => entData.search, (val:string) => {
  treeRef.value!.filter(val)
},{
  deep: true
})

const filterNode = (value: string, data: IDepartmentList) => {
  if (!value) return true
  return data.department_name.includes(value)
}
onMounted(async() => {
  await initData()
})

</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  background-color: #fff;

  .leftPart {
    min-width: 16rem;
    min-height: 30rem;
    border-right: 1px solid lighten(gray, 40);

    .filter-tree {
      .departmentItem {
        width: 13rem;
        height: 2.5rem;
        display: flex;
        align-items: center;

        .icon {
          margin-right: 4px;
          content: url('@/assets/images/treeIcon.svg');
        }
        
        .ellipsis-col {
          position: absolute;
          right: 0.6rem;
          top: 24%;
        }
      }

      ::v-deep .el-tree-node__content {
        height: 2.9rem;
        position: relative;

      }
      ::v-deep .el-tree-node.is-current>.el-tree-node__content {
        border-right: 2px solid #1890ff;
        & .departmentItem {
          color: #1890ff;
          font-weight: bold;
        }
      }
    }
  }

  .rightPart {

    .tableContent {
      min-width: 50rem;
      position: relative;

      .pagination {
        position: absolute;
        bottom: -80px;
        right: 0;
      }

    }
  }
}
</style>